<script>

const app = getApp();
export default {
  data() {
    return {
      codeImg: '',
      headHeight: 0,
      welfareGroup: 'welfareGroup', // 群聊字段
    }
  },
  onLoad() {
    const res = this.$api.GetFuliqun()
    res.then((result) => {
      console.log("二维码==",result.data.result.qr_code)
      this.codeImg = result.data.result.qr_code
    })
    this.getWelfareGroup()

  },
  methods: {
    getWelfareGroup(){

    },

  },
  mounted() {
    this.$nextTick(() => {
      const head = uni.createSelectorQuery().in(this)
      head.select('.code-head').boundingClientRect().exec(res => {
        console.log('head', res)
        this.headHeight = res[0].height
      })

    })
  },
}
</script>

<template>
  <view class="container">
    <scroll-view class="uni-swiper-tab" scroll-y>
      <view class="code-top" style="height: 300rpx"></view>
      <!--   顶部内容 -->
      <view class="code-head">
        <view class="code-head-content">
          <view class="code-head-left">
            <image :src="`https://td.lszbg.com/public/uploads/h5/home/code_head_icon.png`"></image>
          </view>
          <view class="code-head-right">
            <view class="code-head-right-top">
              <text class="code-head-right-official">官方</text>
              <text class="code-head-right-text">群内多重福利等你来</text>
            </view>
            <view class="code-head-right-center"><text>领食惠探店福利群</text></view>
            <view class="code-head-right-bottom"><text>群里专属券包</text><text>不定期评选优秀笔记</text></view>
          </view>
        </view>
      </view>
      <view style="clear: both;"></view>
      <!--    中间二维码内容-->
      <view class="code-content">
        <view class="code-img">
          <image :src="codeImg" :show-menu-by-longpress="true" ></image>
        </view>
        <view class="code-content-text"><text>长按识别二维码进福利群</text></view>
      </view>
<!--      底部多出空间-->
      <view style="height: 360rpx;background: #FEEECA"></view>
    </scroll-view>
<!--    底部内容-->
    <view class="code-foot">
      <view class="code-foot-title"><text>社群专属福利</text></view>
      <view class="code-foot-content">
        <view class="code-foot-content-item">
          <image src="https://td.lszbg.com/public/uploads/h5/home/code_foot_list_icon01.png"></image>
          <view class="code-foot-content-item-title">注册礼包</view>
          <view class="code-head-content-item-text"><text style="font-size: 40rpx;font-weight: bold">2</text><text>元</text></view>
        </view>
        <view class="code-foot-content-item">
          <image src="https://td.lszbg.com/public/uploads/h5/home/code_foot_list_icon02.png"></image>
          <view class="code-foot-content-item-title">完善信息</view>
          <view class="code-head-content-item-text"><text style="font-size: 40rpx;font-weight: bold">3</text><text>元</text></view>
        </view>
        <view class="code-foot-content-item">
          <image src="https://td.lszbg.com/public/uploads/h5/home/code_foot_list_icon03.png"></image>
          <view class="code-foot-content-item-title">首单奖励</view>
          <view class="code-head-content-item-text"><text style="font-size: 40rpx;font-weight: bold">10</text><text>元</text></view>
        </view>
        <view class="code-foot-content-item">
          <image src="https://td.lszbg.com/public/uploads/h5/home/code_foot_list_icon04.png"></image>
          <view class="code-foot-content-item-title">邀请奖励</view>
          <view class="code-head-content-item-text"><text style="font-size: 40rpx;font-weight: bold">20</text><text>元/人</text></view>
        </view>

      </view>
    </view>
  </view>

</template>
<style>
page {
  background-color: #F5F5F5;
  height: 100%;
}
</style>
<style scoped lang="scss">
.container{
  width: 100%;
  height: 100%;
  background: #FEEECA url("https://td.lszbg.com/public/uploads/h5/home/welfareGroup-bg.png") no-repeat;
  background-size: 100% auto;
  .code-head{
    margin: 0 auto;
    border-radius: 20rpx;
    padding: 28rpx;

    .code-head-content{
      width: 100%;
      background: rgba(255, 251, 239, 0.5) url("https://td.lszbg.com/public/uploads/h5/home/code_head_bg.png") no-repeat;
      background-size: 100% auto;
      float: left;
      border-radius: 20rpx 20rpx 0 0;
      overflow: hidden;
      .code-head-left{
        width: 138rpx;
        height: 138rpx;
        float: left;
        margin-top: 12rpx;
        padding: 20rpx;
        image{
          width: 100%;
          height: 100%;
        }
      }
      .code-head-right{
        width: calc(100% - 138rpx);
        float: right;
        padding-top: 24rpx;
        .code-head-right-top{

          .code-head-right-official{
            font-size: 26rpx;
            color: #FFFFFF;
            padding: 6rpx 14rpx;
            margin-top: 20rpx;
            float: left;
            border-radius: 10rpx;
            background: linear-gradient( 270deg, #FF7800 0%, #FF9433 100%);
          }
          .code-head-right-text{
            font-size: 30rpx;
            color: #FFFFFF;
            padding: 8rpx 26rpx;
            border-radius: 30rpx;
            margin-top: -11rpx;
            margin-right: 20rpx;
            float: right;
            background: linear-gradient( 270deg, #FF6600 0%, #FF8C26 100%);;
          }
        }
        .code-head-right-center{
          clear: both;
          line-height: 60rpx;
          font-size: 30rpx;

        }
        .code-head-right-bottom{
          margin: 6rpx 0 10rpx 0;
          float: left;
          text{
            font-size: 24rpx;
            color: #FF510F;
            border: 1px solid #FF8C26;
            border-radius: 6rpx;
            display: block;
            float: left;
            padding: 6rpx 10rpx;
            margin-right: 20rpx;
          }
        }



      }
    }
  }
  .code-content{
    padding-top: 50rpx;
    margin: -20rpx 28rpx 0 28rpx;
    border-radius: 0 0 20rpx 20rpx;
    background: linear-gradient( 178deg, #FFFBEF 0%, #FFFFFF 99%);
    .code-img{

      margin: 0 auto;
      padding: 20rpx;
      width: 360rpx;
      height: 360rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(255,102,0,0.1);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .code-content-text{
      margin-top: 26rpx;
      padding-bottom: 30rpx;
      line-height: 60rpx;
      text-align: center;
      text{
        font-size: 30rpx;
        color: #3D3D3D;
      }
    }
  }
  .code-foot{
    position: fixed;
    bottom: 20rpx;
    left: 30rpx;
    right: 30rpx;
    background: url("https://td.lszbg.com/public/uploads/h5/home/code-foot-bg.png") no-repeat;
    background-size: 100% auto;
    .code-foot-title{
      padding: 20rpx;
      color: #FFFFFF;
      font-size: 36rpx;
    }
    .code-foot-content{
      text-align: center;
      padding: 20rpx;
      display: flex;
      .code-foot-content-item{
        flex: 1;
        margin: 6rpx;
        background: url("https://td.lszbg.com/public/uploads/h5/home/code_foot_list_bg.png") no-repeat;
        background-size: 100% auto;
        image{
          width: 64rpx;height: 64rpx;
          padding: 10rpx 0;
        }
        .code-foot-content-item-title{
          font-size: 24rpx;
          color: #333333;
          margin-top: 20rpx;
        }
        .code-head-content-item-text{
          color: #FF6600;
          line-height: 60rpx;
        }
      }
    }
  }



}
</style>